<template>
  <div>
    <!-- 标题 -->
    <!-- <div class="new-title">源信息</div> -->
    <div>
      <!-- tab 表信息 字段信息 -->
      <el-tabs v-model="activeName" tab-position="left" class="tabs" @tab-click="handleClick">
        <el-tab-pane label="表信息" name="tab">
          <div class="table-info">
            <div class="info-item">表中文名称：{{ source.tableChineseName }}</div>
            <div class="info-item">表英文标识：{{ source.tableName }}</div>
          </div>
          <div class="table-info">
            <div class="info-item">数据量：{{ source.dataSize }}</div>
            <div class="info-item">数据增量：{{ source.incrementDataSize }}</div>
          </div>
          <div class="table-info">
            <div class="info-item">存储量：{{ source.storeDataSize }}</div>
            <div class="info-item">存储增量：{{ source.incrementStoreDataSize }}</div>
          </div>
          <div class="table-info">
            <div class="info-item">业务标签：{{ source.bussinessLabel }}</div>
            <div class="info-item">描述：{{ source.sourceComments }}</div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="字段信息" name="field">
          <!-- 表格 -->
          <div class="table-wrap table">
            <el-table :data="tableData" border stripe style="width: 100%">
              <el-table-column type="index" label="序号" width="180" align="center"></el-table-column>
              <el-table-column
                :show-overflow-tooltip="true"
                prop="logicColumnChineseName"
                label="字段中文名称"
                width="180"
              ></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="logicColumnName" label="字段英文名称"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="logicColumnType" label="字段类型"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" prop="logicColumnLength" label="字段长度"></el-table-column>
              <el-table-column :show-overflow-tooltip="true" label="主键">
                <template slot-scope="scope">{{ scope.row.logicIsPrimaryKey==1?'是':'否'}}</template>
              </el-table-column>
              <!-- <el-table-column align="center" prop label="描述"></el-table-column> -->
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!-- tab  表信息 字段信息 结束-->
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      activeName: "tab",
      source: {
        name: "重点人车表",
        lab: "SFFAFAF"
      },
      tableData: [],
      persentViewFoot: {}
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    this.$store.commit("setDelFlag", false);
    this.source = JSON.parse(JSON.stringify(this.getSourceInfo));
    this.tableData = this.source.columnInfo;
    this.persentViewFoot = JSON.parse(JSON.stringify(this.getViewFoot));
  },
  destroyed() {
    // 如果是删除节点禁止触发销毁钩子
    if (this.getDelFlag) {
      this.$store.commit("setDelFlag", false);
    } else {
      // 存放本算子信息，最终提交用
      const submitIds = this.persentViewFoot.id; // id
      // 根据节点id匹配节点坐标
      const arr = this.flowList.nodeList.filter(
        item => this.persentViewFoot.id === item.id
      );
      const submitValue = {
        operateName: this.persentViewFoot.name,
        operateType: "1",
        location: `${arr[0].top},${arr[0].left}`,
        outPut: this.tableData,
        orderNumber: this.persentViewFoot.id
      };
      const submitObj = {};
      submitObj[submitIds] = submitValue;
      this.$store.commit("setSubmitInfo", submitObj);
    }
  },
  computed: {
    ...mapGetters([
      "getSourceInfo",
      "getViewFoot",
      "setDelFlag",
      "getWrapInfo"
    ]),

    flowList() {
      return this.$store.state.flow.flowList;
    }
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.new-title {
  color: #0090ff;
  margin-bottom: 10px;
}
/deep/ {
  .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  .el-tabs__active-bar {
    background-color: transparent;
  }
  .el-tabs__item {
    padding: 0 0.2rem 0 0;
  }
  .el-tabs__content {
    padding: 30px;
    background: rgba(247, 250, 252, 0.72);
  }
  .el-tabs--left .el-tabs__item.is-left {
    text-align: left;
  }
}
.table {
  font-size: 14px;
  color: #666666;
}
.table-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .info-item {
    width: 50%;
    text-align: left;
    padding: 10px;
  }
}
</style>
